簡介

今天會講一下在設計前要怎麼建立環境，畢竟在設計前還是要先備好畫布嘛，但畫布的尺寸要怎麼挑選呢？所以下面會簡單講一下怎麼根據瀏覽器的尺寸和Bootstrap 5，在Adobe XD設定Grid System 網格系統！
不過這邊要先說明一下，由於這次是實作挑戰，所以不太會有太入門或詳細的介紹如何使用Adobe XD唷，如果是完全新手建議先看其他大師的教學XDD！

步驟

Grid system的設定

首先，先來選擇PC版的畫布大小，這次會選擇 1366x768 去設計。

參考Bootstrap 5 的 Grid system

我們的瀏覽器是1366，所以根據上圖顯示的圖表，是屬於xl（≥1200px）。
以下就是要列出的數值：

• Container：瀏覽器 - 左右兩邊的Margin(即是Gutter Width的一半)
  → 1140px - ( 12px + 12px ) = 1116px
• Columns：12
• Gutter width：1.5 rem（24px）

在XD裡調整Grid的設定

點選畫布後，看看右下方，會顯示上圖的設定，接下來要設定數值：

1. 設定Columns為12px
2. 設定Gutter width為24px
3. 計算左右Margin的算式為(瀏覽器寬度-container寬度)/2
   →（1366 - 1116）/ 2
4. 設定linked left/right margins為125px （上一行算出來的數值）
5. 這樣就可以快速完成設定啦！

圖片及顏色的選擇

設定好Grid system後，接下來要確定Landing Page的主要色及圖片。這邊會先大概找好需要的圖片，這樣才能確定Landing page的主要顏色。下方的圖片是我找來當header的背景圖，因此這次的主要色將會選擇紅色色系。

＊注意：紅色通常是用於「Danger」，所以若選擇紅色色系時，不能直接用亮紅色為主要色，以免使用者混擾。

Landing Page需要的圖片

Landing Page的主要顏色

• Primary：#9B3C05
• Secondary：#FDFCFC
• Text：#707070
• Primary-light：#EFDFD6

下載Bootstrap 5的檔案以參考裡面的設定

接下來終於要去找Bootstrap作為設計的參考了!!

1. 去官網快速下載原始檔案（下方提供官網，按進去後找「原始檔案」）

   Bootstrap官網

2. 去VSCODE開啓剛剛下載的BS5檔案，並打開scss資料夾裡的_variables.scss

3. 在_variables.scss檔裡，參考看看裡面的文字大小、間距、在元件等等的設定
   ＊不一定要跟Bootstrap裡所寫的一模一樣，但至少可以跟著它的原則去畫，這樣切版切起來也會比較方便唷！

結論

因為時間的關係，所以就先跳過主題發想的部分（哈哈哈哈真的不是懶惰!）。今天主要先把Adobe XD的環境建立好，把設計稿會用到的圖片和主要顏色想好，下一篇開始將會一步一步地跟著Bootstrap來設計！明天見^_____^